<template>
  <div class="editInfo">
    <!-- nav区域 -->
    <van-nav-bar left-arrow @click-left="onClickLeft">
      <template #title>{{ editTitle }}</template>
      <template #left>
        <van-icon name="arrow-left" size="18" color="black" />
      </template>
      <!-- 保存按钮 -->
      <template #right>
        <span v-if="preservationBtn" @click="saveimg">保存</span>
      </template>
    </van-nav-bar>
    <!-- 头像区域 -->
    <div v-if="this.type === 'pic'">
      <!-- 图片上传区域 -->
      <div class="imgBox">
        <van-uploader v-model="fileList" :after-read="afterRead" />
      </div>
    </div>
    <!-- input区域 -->
    <div class="inputarea" v-else>
      <van-field v-model="inputValue" placeholder="请输入用户名" />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { uploadAvatar, edit } from '@/api/api.js'
import { getLocal } from '@/utils/local.js'
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  created () {
    this.enterSite()
    this.fileList = [{ url: this.$store.state.userInfo.avatar }]
    // 判断用户是否登录
    if (!getLocal('heimamm_mobile_token')) {
      this.$router.push('/checklogin')
    }
  },
  data () {
    return {
      // 显示保存按钮
      preservationBtn: false,
      // 文件
      fileList: [],
      // 页面类型
      type: this.$route.query.name,
      // 定义标题
      editTitle: '',
      // 输入框内容
      inputValue: '',
      // 图片内容
      userpic: null,
      // 图片保存id
      picid: null,
      baseURL: process.env.VUE_APP_URL
    }
  },
  methods: {
    // 调用action辅助函数
    ...mapActions(['getUserInfo']),
    // 编辑保存上传
    async saveimg () {
      // --------------------图片修改---------------------------------------------------
      if (this.type === 'pic') {
        const res = await edit({
          avatar: this.picid
        })
        res.data.avatar = this.baseURL + res.data.avatar
        // 需要重新调用vuex方法,获取所有的用户信息并覆盖vuex
        // 这里传入的参数为,方法的第二个参数,为了判断成立能够执行方法里的代码
        this.getUserInfo(true)
        // 提示用户
        if (res.code === 200) {
          this.$toast.success('修改成功')
          // 返回my页面
          this.$router.push('/info')
        } else {
          this.$toast.fail('验证失败')
        }
        // --------------------岗位修改---------------------------------------------------
      } else if (this.type === 'job') {
        const res = await edit({ job: this.inputValue })
        // 调用方法修改vuex
        this.getUserInfo(true)
        // 提示用户
        if (res.code === 200) {
          this.$toast.success('修改成功')
          // 返回my页面
          this.$router.push('/info')
        } else {
          this.$toast.fail('验证失败')
        }
        // --------------------昵称修改---------------------------------------------------
      } else if (this.type === 'nickname') {
        const res = await edit({ nickname: this.inputValue })
        // 调用方法修改vuex
        this.getUserInfo(true)
        // 提示用户
        if (res.code === 200) {
          this.$toast.success('修改成功')
          // 返回my页面
          this.$router.push('/info')
        } else {
          this.$toast.fail('验证失败')
        }
        // --------------------简介修改---------------------------------------------------
      } else {
        const res = await edit({ intro: this.inputValue })
        // 调用方法修改vuex
        this.getUserInfo(true)
        // 提示用户
        if (res.code === 200) {
          this.$toast.success('修改成功')
          // 返回my页面
          this.$router.push('/info')
        } else {
          this.$toast.fail('验证失败')
        }
      }
    },
    // 图片上传事件
    async afterRead (file) {
      file.status = 'uploading'
      file.message = '上传中...'
      setTimeout(() => {
        file.status = 'done'
      }, 1500)
      this.preservationBtn = true
      const res = await uploadAvatar(file.file)
      this.picid = res.data[0].id
    },
    // 回退
    onClickLeft () {
      this.$router.go(-1)
    },
    // 判定页面入口
    enterSite () {
      if (this.type === 'job') {
        this.editTitle = '修改岗位'
        this.preservationBtn = true
        // 通过vuex将参数赋给输入框的内容,然后绑定渲染
        this.inputValue = this.userInfo.position
      } else if (this.type === 'nickname') {
        this.editTitle = '修改昵称'
        this.preservationBtn = true
        this.inputValue = this.userInfo.nickname
      } else if (this.type === 'intro') {
        this.editTitle = '修改简介'
        this.preservationBtn = true
        this.inputValue = this.userInfo.intro
      } else {
        this.editTitle = '修改头像'
        this.userpic = this.userInfo.avatar
      }
    }
  }
}
</script>

<style lang="less" scoped>
.editInfo {
  // 头像区域
  .imgBox {
    position: relative;
    height: 200px;
    width: 100%;
    padding: 20px 25% 0 25%;
    overflow: hidden;

    .van-uploader {
      width: 100%;
      height: 100%;
      /deep/ .van-uploader__wrapper {
        width: 100%;
        height: 100%;
        .van-uploader__preview {
          width: 100%;
          height: 100%;
          .van-uploader__file {
            width: 100%;
            height: 100%;
          }
          .van-image {
            width: 100%;
            height: 100%;
            .van-image__img {
              width: 100%;
              height: 100%;
              border-radius: 14px;
            }
          }
        }
        .van-uploader__upload {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .inputarea {
    padding: 10px 20px;
    .input {
      padding: 0 10px;
      width: 100%;
      height: 45px;
      border-radius: 5px;
      border: 0;
      font-size: 16px;
      background-color: rgb(232, 232, 232);
    }
  }
}
</style>
